<template>
  <div id="bottom-header">
    <div class="div div-item-1">地面区</div>
    <div class="div div-item-2">
      <img title="汽车" src="./img/车辆@2x.png" alt="Car" @click="imgBtn(1)" />
    </div>
    <div class="div div-item-3">
      <img title="安全帽" src="./img/安全帽(1)@2x.png" alt="Car" @click="imgBtn(2)" />
    </div>
    <div class="div div-item-4">
      <img title="手环" src="./img/手环@2x.png" alt="Car" @click="imgBtn(3)" />
    </div>
    <div class="div div-item-5">
      <img title="工程" src="./img/工程招标-4@2x.png" alt="Car" @click="imgBtn(4)" />
    </div>
    <div class="div div-item-6">
      <img title="安全" src="./img/安全(3)@2x.png" alt="Car" @click="imgBtn(5)" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bottomeader',
  data () {
    return {}
  },
  mounted () {

  },
  methods: {
    imgBtn (type) {
      // 点击汽车图片
      if (type === 1) {
        // this.$parent.showLine()
      } else if (type === 2) {
        // this.$parent.showFlight();
      } else if (type === 3) {
        // this.$parent.showFlight();
      } else if (type === 4) {
        // this.$parent.showKml()
      } else if (type === 5) {
        // this.$parent.showFlight()
      }
    }
  }

}
</script>

<style lang="less">
#bottom-header {
  // position: relative;
  position: absolute;
  bottom: 5%;
  width: 59%;
  height: 51px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("./img/bottom.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  align-items: center;
  z-index: 2;
  .div {
    width: 10%;
    text-align: center;
    img {
      width: 30%;
      cursor: pointer;
    }
  }
  .div-item-1 {
    color: #ffffff;
  }
}
</style>
